/**
Webpack 服务器通常指的是 Webpack Dev Server，这是一个用于开发环境的服务器，旨在提供快速的开发体验。它可以自动重新加载页面，支持热模块替换（Hot Module Replacement，HMR），并且能够轻松处理静态文件。以下是关于 Webpack Dev Server 的说明总结：
  1. 什么是 Webpack Dev Server？
  Webpack Dev Server 是一个基于 Node.js 的开发服务器，提供了一种简单的方法来开发和测试 Webpack 打包的应用程序。它能够在本地运行应用程序，并支持实时重新加载和热模块替换。

  2. Webpack Dev Server 的主要功能
  - 实时重新加载: 当源代码发生更改时，Dev Server 会自动重新加载页面，反映最新的代码更改。
  - 热模块替换（HMR）: 允许在不刷新整个页面的情况下，替换和更新模块，从而提高开发效率。
  - 静态文件服务: 直接提供静态文件（如 HTML、CSS 和图片），便于开发和测试。
  - 代理 API 请求: 可以配置代理，将 API 请求转发到后端服务器，解决跨域问题。

  3. 安装 Webpack Dev Server
  通过 npm 安装 Webpack Dev Server：
  npm install --save-dev webpack-dev-server
  4. 配置 Webpack Dev Server
  在  `webpack.config.js`  文件中配置 Dev Server。以下是一个基本的配置示例：
  const path = require('path');

  module.exports = {
    entry: './src/index.js', // 入口文件
    output: {
      filename: 'bundle.js', // 输出文件
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/', // 资源的公共路径
    },
    devServer: {
      contentBase: path.join(__dirname, 'dist'), // 提供静态文件的目录
      compress: true, // 启用 gzip 压缩
      port: 9000, // 服务器端口
      hot: true, // 启用热模块替换
      historyApiFallback: true, // 支持 HTML5 History API
    },
    mode: 'development', // 开发模式
  };
  5. 启动 Webpack Dev Server
  在  `package.json`  中添加一个脚本，以便通过命令行启动 Dev Server：
  "scripts": {
    "start": "webpack serve --open"
  }
  然后可以通过以下命令启动服务器：
  npm start
  6. 使用代理
  如果需要将 API 请求代理到后端服务器，可以在  `devServer`  配置中添加  `proxy`  选项：
  devServer: {
    // ...
    proxy: {
      '/api': {
        target: 'http://localhost:3001', // 目标服务器
        secure: false, // 如果是 https 需要设置为 true
      },
    },
  }
  7. 注意事项
  - 性能: Webpack Dev Server 主要用于开发环境，不建议在生产环境中使用。
  - 配置: 根据项目需求灵活配置 Dev Server，以实现最佳的开发体验。
  - HMR: 确保在使用 HMR 时，相关模块能够支持热更新。

  总结
  Webpack Dev Server 是一个强大的开发工具，可以显著提高开发效率。通过简单的配置，可以实现实时重新加载、热模块替换和静态文件服务等功能，为开发者提供便利的开发环境。希望这个总结对你理解 Webpack 服务器的使用有所帮助！
 */
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: false,
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "bundle.js",
    clean: true, // 每次打包前清空build目录
  },
  resolve: {
    extensions: [".js", ".json", ".jsx", ".wasm", ".ts"],
  },
  devServer: {
    static: ["public", "content"],
    // host: '0.0.0.0',
    port: 3000,
    open: true,
    compress: true,
    proxy: [
      {
        "/api": {
          target: "http://localhost:9000",
          pathRewrite: {
            "^/api": "",
          },
          changeOrigin: true,
        },
      },
    ],
    historyApiFallback: true,
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/, // 匹配文件的正则表达式
        exclude: /node_modules/, // 忽略的文件夹
        use: {
          loader: "babel-loader",
          // options: {
          // plugins: [
          //   "@babel/plugin-transform-arrow-functions",
          //   "@babel/plugin-transform-block-scoping",
          // ]
          // presets: [
          //   [
          //     "@babel/preset-env",
          //     {
          //       // 在开发中针对babel的浏览器兼容查询使用browserslist工具, 而不是设置target
          //       // 因为browserslist工具, 可以在多个前端工具之间进行共享浏览器兼容性(postcss/babel)
          //       targets: ">5%"
          //     },
          //   ],
          // ],
          // },
        },
      },
      {
        test: /\.ts$/,
        // use: "ts-loader", // 使用ts-loader
        use: "babel-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
};
